<template>
  <div class="search" :style="{background: bgColor}">
    <img class="search-icon" :src='icon' alt="">
    <span class="search-hint" :style="{color: hintColor}">大前端开发，混合京东商城</span>
  </div>
</template>

<script>
export default {
  name: 'NavigationBar',
  props: {
    // 图标
    icon: {
      type: String,
      default: require('@img/搜索高亮.png')
    },
    // 字体颜色
    hintColor: {
      default: '#999999',
      type: String
    },
    // 背景颜色
    bgColor: {
      default: '#ffffff',
      type: String
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search
  background #ffffff
  width 100%
  margin-top 52px
  height 30px
  width 280px
  border-radius 22px
  display flex
  align-items :center
  .search-icon
    margin-left:12px
    width 16px
    align-self :center
  .search-hint
    margin-left:12px
    font-size 12px
    color #999999
    align-self :center
</style>
